<template>
  <view class="content">
    <Swiper :bannerList="bannerList" style="width: 100%;"></Swiper>

    <view class="flex-container">
      <view v-for="(item, index) in classList" :key="index" class="flex-item" @click="handlerProductClass(item)">
        <view class="flex-image">
          <image :src="item.classpic"></image>
        </view>
        <view>{{ item.classname.slice(0, 4) }}</view>
      </view>
    </view>

    <view class="index_ad">
      <image src="@/static/images/index/ad.png"></image>
    </view>

    <view class="hot">
      <!-- 标题 -->
      <view class="hot_title">
        <view class="left-icon">
          <image src="@/static/images/index/hot_icon.png"
                 style="width: 35px; height: 35px; object-fit: contain;"
          ></image>
        </view>
        <view class="center-content">
          <view class="center-title">热门推荐</view>
          <view class="center-subtitle">Popular recommendations</view>
        </view>
        <view class="right-arrow">
          <uni-icons type="right" size="30"></uni-icons>
        </view>
      </view>
      <!-- S 推荐列表 -->
      <view class="hot_list">
        <product :dataList="productList" style="width: 100%" @handlerItem="handlerItem"></product>
      </view>
      <!-- E 推荐列表 -->

      <!--      <button type="warn" open-type="share">分享</button>-->
      <!--      <form class="hotFormId" @submit="getFormIdValue" report-submit='true'>-->
      <!--        <button formType="submit" type="primary">获取formId</button>-->
      <!--      </form>-->

    </view>
  </view>
</template>

<script>

import Swiper from '@/pages/index/swiper.vue'
import formIdMixin from '@/utils/form-id-mixins.js'

import {config} from "../../config"
import {getBannerList} from "../../models/banner";
import {getUserByToken} from "@/models/user";
import {getProductClass} from "@/models/product";
import product from "@/components/product/product.vue";
import {AppModel} from '../../models/app.js'
import {getProductList} from "../../models/product";
import {userMinix} from "../../minixs/userMinix";
import {mapGetters} from 'vuex';
import store from "../../store";


const appModel = new AppModel()
export default {
  components: {
    Swiper, product
  },
  mixins: [formIdMixin, userMinix],
  data() {
    return {
      title: 'Hello',
      bannerList: [],
      indicatorDots: true,
      productList: [],
      classList: [],
    }
  },
  onShareAppMessage() {
    return {
      title: `hello world`,
      path: `/pages/mine/index`,
      imageUrl: require('@/static/images/index/hot_icon.png'),
    }
  },
  async onLoad() {
    try {
      await this.doLoginLogic(); // 使用await确保顺序执行登录逻辑
      await this.getProductList();
      await this.getClass();
      await this.getBannerList()
    } catch (error) {
      console.error('登录逻辑失败', error);
      // 处理登录逻辑失败的情况
    }


  },
  onShow() {

  },
  methods: {
    /**
     *  获取banner 列表
     */
    async getBannerList() {
      const result = await getBannerList()
      this.bannerList = result.data.data
    },

    /**
     *  用户分享
     */
    getFormIdValue(e) {
      console.log(e.detail.formId)
      this.getFormIdData(e.detail.formId, 2)
    },

    /**
     * 页面获取分类
     * @returns {Promise<void>}
     */
    async getClass() {
      const {data: {data}} = await getProductClass({"limit": 10})
      this.classList = data
    },
    /**
     *  获取图片列表
     */
    async getProductList() {
      const result = await getProductList({"limit": 6});
      this.productList = result.data.data.map(res => {
        return {
          id: res.id,
          title: res.name,
          pic: res.pic
        }
      })
    },

    /**
     * 列表子组件点击
     * @param param
     */
    handlerItem(param) {
      const url = `../product/product-detail?id=` + param.id
      uni.navigateTo({url: url});
    },

    handlerProductClass(params) {
      console.log(params)
    },

    onReachBottom() {
      console.log("aaaaa")
    },

    onPullDownRefresh() {
      console.log("bbbb")
    }

  }
}
</script>

<style lang="less" scoped>

@import "index.less";

.hot {
  width: 100%;

  .hot_list {
    width: 95%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
    background-color: #efefef;
    margin-left: auto;
    margin-right: auto;
  }

  .hot_title {
    padding-top: 10px;
    display: flex;
    align-items: center;
  }

  .left-icon {
    text-align: center;
    //flex: 1; /* 左侧小 */
    font-size: 14px; /* 样式可以根据实际需要调整 */
    width: 50px;
  }

  .center-content {
    flex: 2; /* 中间大 */
    text-align: left;
  }

  .center-title {
    font-size: 16px; /* 样式可以根据实际需要调整 */
    font-weight: bold;
  }

  .center-subtitle {
    font-size: 12px; /* 样式可以根据实际需要调整 */
    color: #999; /* 样式可以根据实际需要调整 */
  }

  .right-arrow {
    font-weight: bolder;
    flex: 1; /* 右侧小 */
    text-align: right;
    padding-right: 15px;
    font-size: 24px; /* 调整字体大小 */
    line-height: 1.5; /* 调整行高 */
  }

}


</style>
